<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<link rel="stylesheet" href="${ctx}/css/ui/activity/counterfoil.css">
<style type="text/css">
    .post_pay_item .cost_content.cost_item-remarks {
        display: none;
    }
</style>
<!-- 票据 -->
<div class="post_main_r">
    <div id="payitemDiv" class="onlyone">
        <div class="post_pay_item">
            <div class="post_pay_item_top">
                <span class="tit01">序号</span> <span class="tit02">票据类型</span>
                <span class="tit02">票据名称</span> <span class="tit03">金额</span>
                <span class="tit03">名额限制</span> <span class="tit03" style="flex: 0.5">操作</span>
            </div>
            <div class="cost_container">
                <c:if test="${fn:length(counterfoils) == 0}">
                    <div class="cost_item cost-item-new">
                        <div class="cost_content">
                            <div class="form_input_number">1</div>
                            <input type="hidden" class="cost_sort" name="counterfoils[0].sort"/>
                            <div class="form_input_cost form_select_cost_type">
                                <select name="counterfoils[0].type" lay-filter="cost_type" class="cost_type">
                                    <c:forEach var="type" items="${counterTypes}">
                                        <option value="${type.key}" ${counterfoil.type == type.key ? 'selected="selected"' : ''}>${type.value}</option>
                                    </c:forEach>
                                </select>
                            </div>
                            <div class="form_input_cost form_input_cost_type">
                                <input type="text" placeholder="请输入票据名称" name="counterfoils[0].name"
                                       class="input cost_name" value="免费票">
                            </div>
                            <div class="form_input_cost form_input_cost_money">
                                <input type="number" placeholder="请输入金额" name="counterfoils[0].payment"
                                       class="input cost_payment" value="0" readonly>
                            </div>
                            <div class="form_input_cost form_input_cost_money">
                                <input type="text" placeholder="请输入限制人数" name="counterfoils[0].limitNum"
                                       class="input cost_limitNum" value="">
                            </div>
                            <div class="form_option">
                                <c:if test="${isGoods}">
                                    <a title="设置" class="control" href="javascript:void(0)"></a>
                                </c:if>
                                <a class="controlEdit" href="javascript:void(0)">
                                    <i class="icon iconfont icon-write"></i>
                                </a>
                                <a title="删除" class="controlClear" href="javascript:void(0)" style="display: none;">
                                    <i class="icon iconfont icon-delete"></i>
                                </a>
                            </div>
                        </div>
                        <div class="cost_content cost_item-remarks">
                            <div class="form_input_number">备注</div>
                            <div class="form-input-remarks">
                                <input type="text" name="counterfoils[0].remarks" class="input cost_remarks"
                                       maxlength="100"/>
                            </div>
                        </div>
                    </div>
                </c:if>
                <c:if test="${fn:length(counterfoils) > 0}">
                    <c:forEach var="counterfoil" varStatus="status" items="${counterfoils}">
                        <c:set var="hasBuy" value="${counterfoil.joinNum > 0 ? true : false}"/>
                        <div class="cost_item cost-item-new">
                            <div class="cost_content">
                                <div class="form_input_number">${status.count}</div>
                                <input type="hidden" class="cost_id" name="counterfoils[${status.index}].id"
                                       value="${counterfoil.id}">
                                <input type="hidden" class="cost_delFlag" name="counterfoils[${status.index}].delFlag"
                                       value="${counterfoil.delFlag}">
                                <input type="hidden" class="cost_sort" name="counterfoils[${status.index}].sort"
                                       value="${counterfoil.sort}"/>
                                <div class="form_input_cost form_select_cost_type">
                                    <select name="counterfoils[${status.index}].type"
                                            lay-filter="cost_type" ${hasBuy == false ? '' : 'disabled'}
                                            class="cost_type">
                                        <c:forEach var="type" items="${counterTypes}">
                                            <option value="${type.key}" ${counterfoil.type == type.key ? 'selected="selected"' : ''}>${type.value}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <div class="form_input_cost form_input_cost_type">
                                    <input type="text" placeholder="请输入票据名称" name="counterfoils[${status.index}].name"
                                           class="input cost_name" value="${counterfoil.name}">
                                </div>
                                <div class="form_input_cost form_input_cost_money">
                                    <c:if test="${hasBuy == true || counterfoil.type == 1}">
                                        <input type="number" placeholder="请输入金额"
                                               name="counterfoils[${status.index}].payment" class="input cost_payment"
                                               value="<fmt:formatNumber value="${counterfoil.payment}" pattern="#.##"/>"
                                               readonly>
                                    </c:if>
                                    <c:if test="${hasBuy == false && counterfoil.type != 1}">
                                        <input type="number" placeholder="请输入金额"
                                               name="counterfoils[${status.index}].payment" class="input cost_payment"
                                               value="<fmt:formatNumber value="${counterfoil.payment}" pattern="#.##"/>">
                                    </c:if>
                                </div>
                                <div class="form_input_cost form_input_cost_money">
                                    <input type="text" placeholder="请输入限制人数"
                                           name="counterfoils[${status.index}].limitNum" class="input cost_limitNum"
                                           data-joinNum = "${counterfoil.joinNum}"
                                           value="${counterfoil.limitNum}">
                                </div>
                                <div class="form_option">
                                    <c:if test="${isGoods}">
                                        <a title="设置" class="control" href="javascript:void(0)"></a>
                                    </c:if>
                                    <a class="controlEdit" href="javascript:void(0)">
                                        <i class="icon iconfont icon-write"></i>
                                    </a>
                                    <c:if test="${hasBuy == false}">
                                        <a class="controlClear" href="javascript:void(0)">
                                            <i class="icon iconfont icon-delete"></i>
                                        </a>
                                    </c:if>
                                </div>
                            </div>
                            <div class="cost_content cost_item-remarks" ${not empty counterfoil.remarks ? 'style="display:flex"' : ''}>
                                <div class="form_input_number">备注</div>
                                <div class="form-input-remarks">
                                    <input type="text" name="counterfoils[${status.index}].remarks"
                                           class="input cost_remarks" value="${counterfoil.remarks}" maxlength="100"/>
                                </div>
                            </div>
                        </div>
                    </c:forEach>
                </c:if>
            </div>
        </div>
    </div>
    <div class="post_main_fee2 mt20">
        <a href="javascript:addItem()" class="layui-btn layui-btn-danger"> <i class="iconfont icon-add btn-icon"></i>
            添加费用项</a>
    </div>
</div>
<script type="text/html" id="item_template">
    <div class="cost_item cost-item-new">
        <div class="cost_content">
            <input type="hidden" class="cost_id" name="counterfoils[{{ d.length }}].id" value="{{ d.id || '' }}" />
            <input type="hidden" class="cost_delFlag" name="counterfoils[{{ d.length }}].delFlag" value="{{ d.delFlag || '' }}" >
            <input type="hidden" class="cost_sort" name="counterfoils[{{ d.length }}].sort" value="{{ d.sort || '' }}" />
            <div class="form_input_number">{{ d.length + 1 }}</div>
            <div class="form_input_cost form_select_cost_type">
                <select name="counterfoils[{{ d.length }}].type" lay-filter="cost_type" class="cost_type">
                    <option value="1" {{ d.type == 1 ? 'selected' : '' }} >免费</option>
                    <option value="2" {{ d.type == 2 ? 'selected' : '' }} >在线付费</option>
                    <option value="3" {{ d.type == 3 ? 'selected' : '' }} >线下付费</option>
                </select>
            </div>
            <div class="form_input_cost form_input_cost_type">
                <input type="text" name="counterfoils[{{ d.length }}].name" placeholder="请输入票据名称"
                       class="input cost_name" value="{{ d.type == 1 ? '免费票' : d.name || '' }}" >
            </div>
            <div class="form_input_cost form_input_cost_money">
                <input type="number" name="counterfoils[{{ d.length }}].payment" placeholder="请输入金额"
                       class="input cost_payment" value="{{ d.type == 1 ? 0 : d.payment || '' }}" readonly>
            </div>
            <div class="form_input_cost form_input_cost_money">
                <input type="text" name="counterfoils[{{ d.length }}].limitNum" placeholder="请输入限制人数"
                       class="input cost_limitNum" value="{{ d.limitNum || '' }}">
            </div>
            <div class="form_option">
                {{# if(d.isGoods == true){ }}
                <a title="设置" class="control"></a>
                {{# } }}
                <a class="controlEdit" href="javascript:void(0)">
                    <i class="icon iconfont icon-write"></i>
                </a>
                <a title="删除" class="controlClear">
                    <i class="icon iconfont icon-delete"></i>
                </a>
            </div>
        </div>
        <div class="cost_content {{ !util.isValid(d.remarks) ? 'cost_item-remarks' : '' }}">
            <div class="form_input_number">备注</div>
            <div class="form-input-remarks">
                <input type="text" name="counterfoils[{{ d.length }}].remarks" class="input cost_remarks" value="{{ d.remarks || '' }}"
                       maxlength="100"/>
            </div>
        </div>
    </div>
</script>
<script type="text/javascript" charset="utf-8">
    var form = null, laytpl;

    function addItem() {
        var length = $(".cost_container").find(".cost_item").length;
        var getTpl = $("#item_template").html();
        laytpl(getTpl).render({
            isGoods: '${isGoods}',
            length: length,
            type : 1
        }, function (html) {
            $(".cost_container").append(html);
        });

        $(".cost_container").find(".cost_item").find(".controlClear").show();
        form.render('select');
        var display = $("#areaInput").css("display");
        if (util.isValid(display)) {
            if (display == "block") {
                $("#areaInput").siblings(".layui-form-select").hide();
            }
        }
    }

    // 1.名称不能重名
    // 2.金额只能为数字且小于等于0
    // 3.名额限制只能为数字且大于等于0
    function checkCost() {
        $(".cost_container").find("input").removeClass("error_bd_red");
        var _payNameArr = new Array();
        var flag = true;
        $(".cost_container").find(".cost_item").each(function (index, element) {
            var $cost = $(element);
            var cost_name = $cost.find(".cost_name").val();
            if (util.isValid(cost_name)) {
                cost_name = cost_name.replace(/\'/g, '');
                cost_name = cost_name.replace(/\"/g, '');
            }
            var cost_payment = $cost.find(".cost_payment").val();
            var cost_limitNum = $cost.find(".cost_limitNum").val();
            var cost_joinNum = $cost.find(".cost_limitNum").data('joinnum');
            var cost_type = $cost.find(".cost_type option:selected").val();

            // 检查空
            if (!util.isValid(cost_name)) {
                $cost.find(".cost_name").addClass("error_bd_red");
                util.layerMsgError("请填写票据名称")
                flag = false;
                return flag;
            }

            if (!util.isValid(cost_payment)) {
                $cost.find(".cost_payment").addClass("error_bd_red");
                util.layerMsgError("请填写金额")
                flag = false;
                return flag;
            }

            if (!util.isValid(cost_limitNum)) {
                $cost.find(".cost_limitNum").addClass("error_bd_red");
                util.layerMsgError("请填写人数上限")
                flag = false;
                return flag;
            }

            // cost_name
            for (var m = 0; m < _payNameArr.length; m++) {
                if (_payNameArr[m] == cost_name) {
                    $cost.find(".cost_name").addClass("error_bd_red");
                    util.layerMsgError("票据名称不能重复")
                    flag = false;
                    return flag;
                }
            }
            _payNameArr.push(cost_name);

            // cost_payment
            var isError = false;
            var desc = "";
            if (isNaN(cost_payment) || !util.checkFloat(cost_payment)) {
                desc = "费用格式不正确";
                isError = true;
            } else if (cost_type > 1 && parseFloat(cost_payment) <= 0) {
                desc = "费用必须大于0";
                isError = true;
            }
            if (isError) {
                $cost.find(".cost_payment").addClass("error_bd_red");
                util.layerMsgError(desc)
                flag = false;
                return flag;
            }

            // cost_limitNum
            isError = false;
            desc = "";
            if (!util.checkNumber(cost_limitNum)) {
                desc = "人数上限必须是数字";
                isError = true;
            } else if (parseInt(cost_limitNum) < 1) {
                desc = "人数上限必须大于0";
                isError = true;
            } else if (cost_joinNum && parseInt(cost_limitNum) < parseInt(cost_joinNum)) {
                desc = "人数上限必须大于等于该票已报名人数：" + cost_joinNum;
                isError = true;
            }

            if (isError) {
                $cost.find(".cost_limitNum").addClass("error_bd_red");
                util.layerMsgError(desc)
                flag = false;
                return flag;
            }
            flag = true;
            $cost.find("input").removeClass("error_bd_red");
        });
        return flag;
    }

    $(function () {
        layui.use(['form', 'laytpl'], function () {
            form = layui.form, laytpl = layui.laytpl;

            form.on('select(cost_type)', function (data) {
                var $cost_item = $(data.elem).closest(".cost_item");
                if (data.value == 1) {
                    $cost_item.find(".cost_name").val("免费票");
                    $cost_item.find(".cost_payment").val("0");
                    $cost_item.find(".cost_payment").prop("readonly", true);
                } else {
                    $cost_item.find(".cost_name").val("");
                    $cost_item.find(".cost_payment").val("");
                    $cost_item.find(".cost_payment").prop("readonly", false);
                }
            });
        });

        function hideDel() {
            var length = $(".cost_container").find(".cost_item").length;
            if (length == 1) {
                $(".cost_container").find(".cost_item").find(".controlClear").hide();
            }
        }

        hideDel();

        $('#payitemDiv').delegate('a,input', 'click', function (e) {
            var $target = $(e.target);
            if ($target.hasClass("control")) {
                var restrictControl = $target.closest(".cost_item").find(".restrictControl");
                var display = $(restrictControl).css("display");
                if (display == "none") {
                    $(restrictControl).show();
                } else {
                    $(restrictControl).hide();
                }
                e.stopPropagation();
            } else if ($target.hasClass("icon-delete")) {
                // length = 1表示更新；length=表示新增
                var costId = $target.closest(".cost_item").find(".cost_id").val();
                if (!util.isValid(costId)) {
                    $target.closest(".cost_item").remove();
                } else {
                    $target.closest(".cost_item").hide();
                    $target.closest(".cost_item").find(".cost_delFlag").val("1");
                    $target.closest(".cost_item").removeClass("cost_item");
                }
                // 重新编号
                $(".cost_container").find(".cost_item").each(function (index, element) {
                    var $cost = $(element);
                    $cost.find(".form_input_number:eq(0)").text(index + 1);
                });
                // 如果只有一种票了，则不能删除
                var length = $(".cost_container").find(".cost_item").length;
                if (length == 1) {
                    $(".cost_container").find(".cost_item").find(".controlClear").hide();
                }
                e.stopPropagation();
            } else if ($target.hasClass("cost_payment")) {
                var $cost_item = $target.closest(".cost_item");
                var type = $cost_item.find(".form_select_cost_type").find("select option:selected").val();
                var readonly = $target.attr("readonly");
                if (util.isValid(readonly) && type != 1) {
                    util.layerMsgError("已经有报名的收费项不能修改金额")
                }
                e.stopPropagation();
            } else if ($target.hasClass("icon-write")) {
                var $remarks = $target.closest(".cost-item-new").find(".cost_item-remarks");
                $remarks.css('display', 'flex');
            }
        });
    });

    // 重置下标
    function resetIndex() {
        // 重新标索引
        $(".cost_container").find(".cost-item-new").each(function (index, element) {
            var $cost = $(element);

            var $costId = $cost.find(".cost_id");
            updateName($costId, index);

            var $costDelFlag = $cost.find(".cost_delFlag");
            updateName($costDelFlag, index);

            var $costSort = $cost.find(".cost_sort");
            $costSort.val(index + 1);
            updateName($costSort, index);

            var $costRemarks = $cost.find(".cost_remarks");
            updateName($costRemarks, index);

            $cost.find(".form_input_cost").each(function (i, ele) {
                var $input = $(ele).find("input");
                updateName($input, index);

                var $select = $(ele).find("select");
                updateName($select, index);
            });
            var $select = $cost.find(".restrictControl").find("select");
            updateName($select, index);
        });

        // 重置下标
        function updateName(ele, index) {
            var name = $(ele).attr("name");
            if (util.isValid(name)) {
                var start = name.substring(0, name.indexOf("[") + 1);
                var end = name.substring(name.indexOf("]"), name.length);
                var newName = start + index + end;
                $(ele).attr("name", newName);
            }
        }
    }

    function loadCounterfoil(counterfoils) {
        $(".cost_container").html("");
        var getTpl = $("#item_template").html();
        for (var i = 0; i < counterfoils.length; i++) {
            var map = counterfoils[i];
            map['isGoods'] = '${isGoods}';
            map['length'] = map.index;
            laytpl(getTpl).render(map, function (html) {
                $(".cost_container").append(html);
            });
        }
    }
</script>